<style>
    .container-fluid{
        margin:1px;
        margin-bottom:30px;
    }
    .container-fluid .row .fluid-cheld {
        background: rgb(249, 249, 249);
        border:1px solid #d8dbda;
    }
    .input-group-md input[type="date"]{
        line-height:18px;
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="">&nbsp;</div>
        <div class="col-md-8 col-xs-8 col-md-8 fluid-cheld">
            <form class="form-inline" action="{{ route('admin.stat.call.department') }}" method="get">
                <div class="">&nbsp;</div>
                <!-- Standard button -->
                <a href="{{ route('admin.stat.call.single') }}" class="btn btn-default">个人排行</a>
                <!-- Contextual button for informational alert messages -->
                <a href="{{ route('admin.stat.call.department') }}" class="btn btn-info">部门排行</a>

                <div class="">&nbsp;</div>
                <div class="">呼出次数排行（按呼出次数统计）</div>
                <div class="">&nbsp;</div>
                <div class="form-group">
                    <div class="col-sm-8" style="">
                        <div class="input-group input-group-md">
                            <input type="date" name="created_at1" value="{{ $depa['where']['created_at1'] }}" class="form-control" id="date" placeholder="">
                            <span class="input-group-addon" style="border-left: 0; border-right: 0;">-</span>
                            <input type="date" name="created_at2" value="{{ $depa['where']['created_at2'] }}" class="form-control" id="date" placeholder="">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <select class="form-control input-md" name="limit">
                        <option value="">选择部门</option>
                        <option @if($depa['where']['limit'] == '1') selected @endif value="1">中心</option>
                        <option @if($depa['where']['limit'] == '10') selected @endif value="10">部门</option>
                        <option @if($depa['where']['limit'] == '100') selected @endif value="100">小部门</option>
                        <option @if($depa['where']['limit'] == '1000') selected @endif value="1000">小组</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control input-md" name="limit">
                        <option value="">显示数量</option>
                        <option @if($depa['where']['limit'] == '1') selected @endif value="1">1</option>
                        <option @if($depa['where']['limit'] == '10') selected @endif value="10">10</option>
                        <option @if($depa['where']['limit'] == '100') selected @endif value="100">100</option>
                        <option @if($depa['where']['limit'] == '1000') selected @endif value="1000">1000</option>
                    </select>
                </div>
                <!-- Contextual button for informational alert messages -->
                <button class="btn btn-info" type="submit">查询</button>
                <button type="submit" class="btn btn-default">重置</button>
            </form>

            <div class="">&nbsp;</div>
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="main" style="height:400px;"></div>
            <div class="">&nbsp;</div>
        </div>
        <div class="">&nbsp;</div>
    </div>
</div>


<div class="container-fluid">
    <div class="row">
        <div class="">&nbsp;</div>
        <div class="col-md-8 col-xs-8 col-md-8 fluid-cheld">
            <div class="">&nbsp;</div>
            呼出次数：100          接听次数：140
            <div class="">&nbsp;</div>

            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th>排名</th>
                    <th>部门</th>
                    <th>呼出次数</th>
                    <th>接听次数</th>
                </tr>
                </thead>
                <tbody>
                @foreach($depa['newData'] as $k=>$v)
                    <?php
                        $page = request()->page ?? $data->currentPage();
                        static $num = null;
                        $num = ($num * $page) + 1;
                    ?>
                <tr>
                    <th scope="row">{{ userRanking($data) }}</th>
                    <td>{{ $v->title }}</td>
                    <td>{{ $v->huchu }}</td>
                    <td>{{ $v->jietin }}</td>
                </tr>
                @endforeach
                </tbody>
            </table>
            {{ $data->links() }}
        </div>
    </div>
</div>

<!-- 引入 echarts.js -->
<script src="{{ asset('echarts/echarts/dist/echarts.js') }}"></script>
<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: ''
        },
        tooltip: {},
        legend: {
            x:'center',      //可设定图例在左、右、居中
            y:'bottom',     //可设定图例在上、下、居中
            data:['呼出次数','接听次数']
        },
        xAxis: {
            data: {!! json_encode($depa['nameData']['name'], JSON_UNESCAPED_UNICODE ) !!}
        },
        yAxis: {},
        series: [{
            name: '呼出次数',
            type: 'bar',
            data: {!! json_encode($depa['nameData']['huchu']) !!}
        },{
            name: '接听次数',
            type: 'bar',
            data: {!! json_encode($depa['nameData']['jietin']) !!}
        }],
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

